// 入口文件，挂载app、全局配置等

import { createApp } from 'vue'; // 从 Vue 库导入创建应用的函数
import App from './App.vue'; // 导入根组件 App.vue
import router from './router'; // 导入路由实例
import { createPinia } from 'pinia'; // 导入 Pinia 状态管理库的创建函数

import 'bootstrap/dist/css/bootstrap.min.css'; // 引入 Bootstrap 样式（CSS 框架）
import 'bootstrap-icons/font/bootstrap-icons.css'; // 引入 Bootstrap 图标库样式
import './assets/css/mobile-optimization.css'; // 引入针对手机端的样式优化文件
import './assets/styles.css'; // 引入项目的全局样式文件

import { useThemeStore } from './store/theme'; // 导入主题管理的 Pinia store，用于切换暗黑/亮色主题
import { useAuthStore } from './store/auth';

const app = createApp(App); // 创建 Vue 应用实例，根组件是 App.vue
const pinia = createPinia(); // 创建 Pinia 实例，用于全局状态管理
app.use(pinia); // 挂载 Pinia 插件到 Vue 应用
app.use(router); // 挂载路由插件到 Vue 应用

// 初始化认证状态
const auth = useAuthStore();
await auth.initAuth();

app.mount('#app'); // 把 Vue 应用挂载到页面中 id 为 app 的元素上

// 初始化主题 ⚠️ 因为 Pinia 挂载后才能使用 store，所以下面必须在挂载之后调用
const theme = useThemeStore(); // 获取主题管理的 store 实例
theme.initTheme(); // 执行主题初始化，比如设置暗黑模式或默认主题  如果未来主题初始化要从接口拉数据，建议把它弄成异步函数，保证主题初始化完成再渲染页面，避免闪烁
